<template>
    <div class="auto-complete">
        <!-- :filter-option="filterOption" -->
        <a-auto-complete @blur="handleBlur" @search="handleSearch" @select="handleSelect" :allowClear="allowClear"
            :size="size" v-model:value="selectValue" :options="options" style="width: 100%"
            :placeholder="placeholder" />
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, unref, toRefs } from 'vue';
import { defHttp } from '@/utils/http/axios';
type TypeList =
    | 'bindDeviceTom'

enum typeFunc {
    bindDeviceTom = 'devices/BindMany', //多个类型设备
}

export default defineComponent({
    name: 'auto_complete',
    props: {
        className: {
            type: String,
            default: '',
        },
        type: {
            type: String,
            default: 'org',
        },
        value: {
            type: String,
            default: '',
        },
        watchKey: {
            type: Array,
            default: [],
        },
        size: {
            type: String,
            default: 'Middle',
        },
        placeholder: {
            type: String,
            default: '请选择',
        },
        watchParams: {
            type: String || Array,
            default: '',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        allowClear: {
            type: Boolean,
            default: true,
        },
        afterEcah: {
            type: Function,
        },
        changeHandler: {
            type: Function,
        },
        xhrParams: {
            type: Object,
            default: () => {
                return {
                    data: 'entities',
                    pageIndex: 1,
                    pageSize: 100,
                };
            },
        },

    },
    setup(props, context) {
        const isLoading = ref(true)
        const selectValue = ref<string | number | Array<string>>();
        let { type, xhrParams, watchKey, watchParams, disabled, afterEcah, changeHandler, allowClear } = props;
        const options = ref([]);
        const disabledValue = ref(disabled);
        const orgSelect = ref(null);
        if (watchParams) {
            //当进行多个监听的时候只监听这个对象，不监听所有的key
            if (Array.isArray(watchParams)) {
                // watchParams.forEach((item: any) => {
                watch(
                    () => watchParams,
                    (n, b) => {
                        // xhrParams = n;
                        // getselectList(type as TypeList);
                    },

                );
                // });
            }
        }
        const handleChange = (value: string) => {
            context.emit('input', value);
            context.emit('getKeyWard', value);
            // let r = options.value.find((item) => {
            //   return item.binderId == value;
            // });
            changeHandler && changeHandler(value || {}, unref(options));
        };
        const dataSource = ref([])
        // 根据type不同调用不同的接口
        const getselectList = (type: TypeList) => {
            let url = typeFunc[type];
            setTimeout(() => {
                //当选中标签的时候，监听的组件会调用接口，解决下拉框在关闭的时候的抖动问题
                isLoading.value = true;
            }, 300);
            defHttp.get({ url, params: xhrParams }).then((res) => {

                const data = res.data.map((ele) => {
                    ele.label = ele.name + "-" + ele.code + "-" + ele.binderCode;
                    ele.value = ele.name + "-" + ele.code + "-" + ele.binderCode;
                    return ele
                })
                dataSource.value = data;
                options.value = data

            }).finally(() => {
                setTimeout(() => {
                    isLoading.value = false;
                }, 300);
            });
        };
        const formatList = (list): [] => {
            // if (!list) return [];
            if (typeof afterEcah == 'function') {
                options.value = afterEcah(list);
            } else {
                options.value = list;
            }
        };
        const filterOption = (input: string, option: any) => {
            let name = option['label'];
            return name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
        };
        getselectList(type as TypeList);
        const handleSelect = (value, option) => {
            context.emit('getKeyWard', option.code);
        }
        const handleBlur = (value, option) => {
            context.emit('getKeyWard', selectValue.value);
        }
        const handleSearch = (value, option) => {
            options.value = dataSource.value;
            options.value = options.value.filter((item) => {
                return item.label.toLowerCase().indexOf(value.toLowerCase()) >= 0;
            })
        }
        return {
            handleSelect,
            handleSearch,
            selectValue,
            dataSource,
            options,
            orgSelect,
            disabled,
            allowClear,
            disabledValue,
            handleChange,
            filterOption,
            isLoading,
            handleBlur,
        };
    },
});
</script>

<style>
.select {
    width: 100%;
}
</style>